<template>
  <div class="enter" ref="enterBox">
    <div class="container">
      <div class="angle-decorate"></div>
      <div class="angle-decorate"></div>
      <div class="angle-decorate"></div>
      <div class="angle-decorate"></div>
      <main class="flex">
        <div class="left-side flex">
          <div class="side-top-box">
            <h1 ref="titleHeadline">the language of sunflower</h1>

            <div class="title" ref="title">Allegiance</div>
            <div class="title-att">every day</div>
            <div class="content">
              the sun rises in the east and sets in the west <br />
              and the sunflowers follow the direction of the sun's footsteps.<br />
              This is the spirit of loyalty and constancy,<br />
              once you determine the direction to follow, <br />
              you will move towards the goal.
            </div>

          </div>

          <div class="side-bottom-box">

            <router-link tag="div" :to="{name: 'Home'}">
              <template v-if="isPC">
                <div class="enter-btn" @mouseenter="willEnter" @mouseleave="willLeave">
                  <router-link tag="div" :to="{name: 'Home'}">enter</router-link>
                </div>
              </template>
              <template v-else>
                <div class="enter-btn">
                  <router-link tag="div" :to="{name: 'Home'}">enter</router-link>
                </div>
              </template>
            </router-link>

            <div class="svg-box">
              <QQ class="qq-svg" @click="getContactWay" />
              <a href="https://github.com/canGeEr">
                <LogoGitHub /></a>
              <a href="https://gitee.com/cangeer">
                <Gitee class="icon-gitee" /></a>
              <Wechat class="wechat-svg" @click="getContactWay" />
            </div>
          </div>

        </div>
        <div class="right-side"></div>
        <div class="center" ref="centerBox">
          <div class="center-box">
            蛇皮站
          </div>
        </div>
      </main>
    </div>

    <transition name="slide">
      <div class="window-pop-up" v-show="showPopUp">
        <div class="pop-up-box">
          <div class="qr-portrait" :style="{backgroundImage: `url(${contactWay.portrait})`}"></div>
          <div class="qr-name">{{contactWay.name}}</div>
          <div class="qr-number"><span>{{contactType}}</span>: {{contactWay.number}}</div>
          <div class="qr-code" :style="{backgroundImage: `url(${contactWay.code})`}"></div>
          <div class="close-pop-up-btn" @click="showPopUp=!showPopUp">OK</div>
        </div>
      </div>
    </transition>

  </div>
</template>

<script>
  import NProgress from 'nprogress' 
  import Store from '__STORE__/index.js'
  import QQ from '__SVG__/qq.svg'
  import Gitee from '__SVG__/gitee.svg'
  import LogoGitHub from '__SVG__/logo_gitHub.svg'
  import Wechat from '__SVG__/wechat.svg'
  import Vue from 'vue'
  export default {
    name: 'Enter',
    components: {
      QQ,
      LogoGitHub,
      Gitee,
      Wechat
    },
    data: () => ({
      contactType: 'qq',
      showPopUp: false //控制弹窗是否展示
    }),
    computed: {
      isPC() {
        return this.$store.state.globalConfig.equipmentType === 'PC'
      },
      contactWay() {
        const {
          author
        } = this.$store.state.globalConfig;
        return author[this.contactType]
      }
    },
    methods: {
      willEnter() {
        /* 开始希望背景图片变化，发现还是黑色好 */
        // const windowWidth = document.body.clientWidth
        // if (windowWidth < 1024) return;
        // enterBox.style.backgroundImage = window.getComputedStyle(rightSide).backgroundImage
        const {
          enterBox,
          titleHeadline,
          centerBox,
          title
        } = this.$refs

        enterBox.style.backgroundColor = 'black'
        titleHeadline.style.color = 'red'
        title.style.color = 'white'
        centerBox.style.display = 'none'
      },
      willLeave() {
        const {
          enterBox,
          titleHeadline,
          centerBox,
          title
        } = this.$refs
        enterBox.style.backgroundColor = ''
        titleHeadline.style.color = 'black'
        title.style.color = 'black'

        const windowWidth = document.body.clientWidth
        if (windowWidth >= 1024) centerBox.style.display = 'block';

      },
      getContactWay(e) {
        const targetClassName = e.currentTarget.classList.value
        const isQQClick = targetClassName.indexOf('qq') !== -1
        const isWechatCilck = targetClassName.indexOf('wechat') !== -1
        let changeToShowWay
        if (isQQClick) {
          changeToShowWay = 'qq'
        } else if (isWechatCilck) {
          changeToShowWay = 'wechat'
        }
        if (changeToShowWay) {
          this.showPopUp = true
          this.contactType = changeToShowWay
        }
      }
    },
    //进入路由之前
    beforeRouteEnter (to, from, next) {
      //获取 vuex 的 用户数据状态
      const { deadUserInfo } = Store.state.user
      if(deadUserInfo.user_id && deadUserInfo.access_token) { // 如果已经登入直接进入home页
        next({name: 'Home'})
        NProgress.done() // finish progress bar
      }else {
        next()
      }
    },
    beforeRouteLeave(to, from, next) {
      Vue.prototype.$Notice.state({
        title: '请谅解',
        desc: '服务器不够强，时长有无法加载数据，等待几秒后请刷新几次重新加载',
        duration: 3000
      })
      next()
    }
  }
</script>

<style lang="less">
  @import url('__CSS__/enter/enter.less');
</style>